<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log Viewer</title>
    <!-- 引入 LayUI CSS -->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        #log-container {
            width: 100%;
            margin: 12px auto;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-y: auto;
            height: 520px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <h1 style="text-align: center; margin-top: 20px;">操作日志</h1>
        <div class="layui-card">
            <div class="layui-card-header">
                <button id="refresh-btn" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-refresh"></i> 更新</button>

            </div>
            <div class="layui-card-body">
                <div id="log-container">加载中...</div>
            </div>
        </div>
    </div>

    <!-- 引入 LayUI JS -->
    <script src="/static/js/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery'], function () {
            const layer = layui.layer;
            const $ = layui.$;

            // 加载日志内容
            function loadLogs() {
                $.ajax({
                    url: '/logs',
                    method: 'GET',
                    success: function (res) {
                        if (res.code === 0) {
                            // 显示日志内容
                            $('#log-container').text(res.data.join(''));
                            // 滚动到最底部
                            const logContainer = document.getElementById('log-container');
                            logContainer.scrollTop = logContainer.scrollHeight;
                        } else {
                            layer.msg('加载日志失败: ' + res.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('请求失败，请检查网络', { icon: 2 });
                    }
                });
            }

            // 初始化加载日志
            loadLogs();

            // 点击“更新日志”按钮
            $('#refresh-btn').on('click', function () {
                loadLogs();
                layer.msg('日志已更新', { icon: 1 });
            });
        });
    </script>
</body>
</html>